@import '../../../../../common/_utils/style/mixins/mixins.scss';
@import '../../../../../common/_utils/style/theme/theme.scss';
@import '../../../../../common/collapse-card/style/collapse-card.scss';
@import '../../../../../common/layer-select/style/layer-select.scss';
@import '../../../../../common/select/style/select.scss';
@import '../../../../../common/switch/style/switch.scss';
@import '../../../../../common/radio/style/radio.scss';
@import '../../../../../common/input/style/input.scss';
@import '../../../../../common/slider/style/slider.scss';
@import '../../../../../common/button/style/button.scss';
@import '../../../../../common/color-picker/style/color-picker.scss';

@include b(fill-extrusion) {
  $fill-extrusion-prefix: &;
  $collapse-card-prefix: #{$ant-prefix}-collapse-card;
  width: 284px;
  @include e(content) {
    width: 100%;
    height: 100%;
    padding: 16px;
    .content-item {
      display: flex;
      align-items: center;
      &:not(.height-item) {
        margin-bottom: 14px;
        &:last-child {
          margin-bottom: 0;
        }
      }
      > label {
        margin-right: 12px;
        width: 25%;
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
        color: $heading-color;
        & + *:not(.#{$ant-prefix}-switch) {
          flex: 1;
          &.#{$ant-prefix}-btn {
            flex-basis: 30%;
            flex-grow: 0;
          }
        }
      }
      .#{$ant-prefix}-radio-group, .#{$ant-prefix}-radio-button-wrapper {
        font-size: inherit;
        color: inherit;
      }
      .#{$ant-prefix}-radio-group {
        display: flex;
      }
      .#{$ant-prefix}-radio-button-wrapper {
        flex: 1;
        text-align: center;
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
      }
      .#{$ant-prefix}-input-affix-wrapper {
        background-color: $component-background;
        .#{$ant-prefix}-input {
          background-color: transparent;
        }
      }
      .#{$ant-prefix}-select {
        background-color: $component-background;
        overflow: hidden;
        &-selection {
          background-color: transparent;
        }
      }
      .#{$ant-prefix}-select,
      .#{$ant-prefix}-select-tree,
      .#{$ant-prefix}-select-dropdown,
      .#{$ant-prefix}-select-dropdown-menu-item,
      .#{$ant-prefix}-input-number,
      .#{$ant-prefix}-slider {
        font-size: inherit;
        color: inherit;
      }
      .#{$ant-prefix}-select-tree {
        li {
          .#{$ant-prefix}-select-tree-node-content-wrapper {
            color: inherit;
          }
        }
      }
      .#{$ant-prefix}-slider {
        margin-top: 0;
        margin-bottom: 0;
      }
      .#{$ant-prefix}-input-number-handler-wrap {
        background-color: inherit;
      }
      .#{$ant-prefix}-colorpicker {
        width: auto;
        height: 28px;
      }
      .#{$ant-prefix}-btn {
        font-size: inherit;
      }
      .content-holder {
        display: flex;
        align-items: center;
        > * {
          flex: 1;
          &:last-child {
            margin-left: 6px;
          }
        }
      }
    }
    .sub-content-holder {
      background-color: $collapse-card-secondary-bg;
      margin: 8px 0 12px;
      padding: 8px 0;
      .content-item {
        > label {
          padding-left: 12px;
          & + * {
            margin-right: 10px;
          }
        }
      }
    }
  }
  .is-not-header {
    &.is-top-left, &.is-bottom-left {
      #{$fill-extrusion-prefix}__content {
        padding-left: 32px;
      }
    }
    &.is-top-right, &.is-bottom-right {
      #{$fill-extrusion-prefix}__content {
        padding-right: 32px;
      }
    }
  }
}
